import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  base: "/", // 开发或生产环境服务的 公共基础路径。
  //envPrefix: "ENV_", // 设置变量头部命名为ENV_,默认的环境变量需要以VITE_开头，不然会被Vite自动过滤掉
  envDir: "env", // 加载.env文件的目录默认为根目录
  publicDir: "public", // 静态资源服务的文件夹
  cacheDir: "node_modules/.vite", // 存储缓存文件的目录
  build: {
    //target: ['modules'], // 设置最终构建的浏览器兼容目标
    //polyfillModulePreload: true, // 是否自动注入 module preload 的 polyfill
    outDir: "dist", // 指定输出路径
    assetsDir: "assets", // 指定生成静态文件目录
    cssCodeSplit: true, // 启用 CSS 代码拆分,如果禁用，整个项目中的所有 CSS 将被提取到一个 CSS 文件中。默认true
    emptyOutDir: true, // 构建时清空该目录
    sourcemap: false, // 构建后是否生成 source map 文件
    assetsInlineLimit: "4096", // 小于此阈值(4KB)的导入或引用资源将内联为 base64 编码
    //cssCodeSplit: true, // 启用 CSS 代码拆分
    minify: "terser",
    terserOptions: {
      compress: {
        //生产环境时移除console和debugger
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      //打包分包
      output: {
        entryFileNames: "js/[name]-[hash].js",
        chunkFileNames: "js/[name]-[hash].js",
        //文件打包分类
        assetFileNames(assetInfo) {
          if (assetInfo.name.endsWith(".css")) {
            return "css/[name]-[hash].css";
          }
          const imgExts = [
            ".png",
            ".jpg",
            ".jpeg",
            ".webp",
            ".svg",
            ".gif",
            ".ico",
          ];
          if (imgExts.some((ext) => assetInfo.name.endsWith(ext))) {
            return "Imgs/[name]-[hash].[ext]";
          }
          return "assets/[name]-[hash].[ext]";
        },
      }
    }
  },
  resolve: {
    // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
    alias: {
      "@": resolve(__dirname, "src"),
      public: resolve(__dirname, "public"),
      // 注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！
      components: resolve(__dirname, "src/components"),
      // 配置图片要这样引用也可以自定义方法引入图片静态资源
      assets: resolve(__dirname, "./src/assets"),
      utils: resolve(__dirname, "src/utils"),
    },
  },
  server: {
    //使用IP能访问
    host: "127.0.0.1",
    // 热更新
    hmr: true,
    //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    strictPort: false,
    port: 8899,
    open: true, //是否自动打开浏览器
    cors: true, //为开发服务器配置 CORS , 默认启用并允许任何源
    https: false,
    proxy: {
      // // 选项写法
      // "/api": {
      //   target: "",
      //   changeOrigin: true,
      //   rewrite: (path) => path.replace(/^\/api/, ""),
    },
  },
  plugins: [vue()],
});
